<template>
	<!-- 设置放置地图的ref -->
	<div class="MapTest">
		<baidu-map :center="center" :zoom="zoom" style="height: 800px; width: 100%" :scroll-wheel-zoom="true">
			<bm-marker v-for="(fishPoint, index) in fishPointList" :key="index" :position="fishPoint.position"
				:icon="{ url: mapIcon, size: { width: 50, height: 50 } }" @click="toggleInfoWindow(fishPoint)">
				<bm-label :content="fishPoint.locationName" :labelStyle="{ color: 'black', fontSize: '8px' }"
					:offset="{ width: 35, height: 10 }" />
			</bm-marker>
			<bm-info-window :position="fishPoint.position" :show="show" @close="infoWindowClose" @open="infoWindowOpen">
				<p>钓鱼点名称：{{ fishPoint.locationName }}</p>
				<p>钓鱼点类型：{{ fishPoint.locationType }}</p>
				<p>常见鱼种类型：{{ fishPoint.fishTypes }}</p>

			</bm-info-window>
		</baidu-map>

		<!-- <BMap  :center="center" class="map" :scroll-wheel-zoom="true" :zoom="zoom" @ready="bMapLoad" /> -->
	</div>
</template>

<script>
import { listFishpoint, getFishpoint, delFishpoint, addFishpoint, updateFishpoint } from "@/api/info/fishpoint";
import BMap from 'vue-baidu-map/components/map/Map'
import mapIconPath from "../img/fishiPoint.png"

export default {
	name: "Index",
	components: {
		BMap,
	},
	data() {
		return {
			fishPoint: {},
			show: false,
			mapIcon: mapIconPath,
			// 版本号
			version: "3.8.8",
			center:
			{
				lng: 115.987947,
				lat: 28.680193
			},
			zoom: 14,
			map: null, // 地图容器
			BMap: null, // 构造器容器
			// 总条数
			total: 0,
			// 钓鱼点管理表格数据
			fishPointList: []
		};
	},
	created() {
		this.getList()
	},
	methods: {
		infoWindowClose() {
			this.show = false
		},
		infoWindowOpen() {
			this.show = true
		},
		//是否展示钓鱼点详细信息
		toggleInfoWindow(positionInfo) {
			console.log(positionInfo)
			this.fishPoint = positionInfo
			this.show = true
		},
		/** 查询钓鱼点管理列表 */
		getList() {
			this.loading = true;
			listFishpoint(this.queryParams).then(response => {
				this.fishPointList = response.rows;
				this.total = response.total;
				for (var i = 0; i < this.fishPointList.length; i++) {
					this.fishPointList[i].position = {
						lng: this.fishPointList[i].longitude * 1,
						lat: this.fishPointList[i].dimension * 1,
					}
				}
				console.log(this.fishPointList)
			});
		}
	}
};
</script>

<style scoped lang="scss">
.MapTest {
	padding: 20px;
}

.map {
	width: 100%;
	height: calc(100vh - 240px);
}

// 去掉百度地图左下角的logo
:deep() {
	.BMap_cpyCtrl {
		display: none;
	}

	.anchorBL {
		display: none;
	}
}
</style>
